<div class="cmp-cuadro-foto">
  <div class="puntuacion sp">
    <div class="txt-left">
      <a href="javascript:void()" class="puntuar" onclick="puntuar(1,this)">1</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(2,this)">2</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(3,this)">3</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(4,this)">4</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(5,this)">5</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(6,this)">6</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(7,this)">7</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(8,this)">8</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(9,this)">9</a>
      <a href="javascript:void()" class="puntuar" onclick="puntuar(10,this)">10</a>
    </div>
  </div>
  <div class="foto-principal">
      <span><img class="watermark ads-img" src="{{user.getImagenDefault().getPathWeb(true)}}" alt="{{user.nombre}}" title="{{user.nombre}}"/></span>
  </div>
  {% if user.getImagenes.count > 1 %}
    <div class="fotos-secundarias">
          <ul id="mycarousel" class="jcarousel-skin-tango"></ul>
          <script type="text/javascript">
              mycarousel_itemList = [];
              mycarousel_itemListLarge = [];
              {% for imagen in user.getImagenes %}
                  mycarousel_itemList.push({href:'{{imagen.getPathWeb}}',title:'{{imagen.label}}'});
                  mycarousel_itemListLarge.push({href:'{{imagen.getPathWeb(true)}}',title:'{{imagen.label}}'});
              {% endfor %}
          </script>
    </div>
    <script type="text/javascript">
        function mycarousel_itemLoadCallback(carousel, state)
        {
            for (var i = carousel.first; i <= carousel.last; i++) {
                if (carousel.has(i)) {
                    continue;
                }

                if (i > mycarousel_itemList.length) {
                    break;
                }

                carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1],i-1));
            }
        };

        /**
         * Item html creation helper.
         */
        function mycarousel_getItemHTML(item,i)
        {
            return '<a href="javascript:void(0);" onclick="mostrarFancy('+i+')"><img src="' + item.href + '" width="90" height="90" alt="' + item.href + '" title="'+item.title+'" /><a/>';
        };

        jQuery(document).ready(function() {
            jQuery('#mycarousel').jcarousel({
                size: mycarousel_itemList.length,
                itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
            });
        });
    </script>
  {% endif %}
<script type="text/javascript">
    function puntuar(puntos,el){
        $(el).addClass('selected');
        url = Routing.generate('votarPerfil', { "usuario":{{user.id}},"puntos": puntos });
        $.post(url , function(data) {
            if( data.length > 0 )
            {
                window.location.href = data;
            }
        });
    }
    function mostrarFancy(id){
        $.fancybox(mycarousel_itemListLarge, {
                'padding'           : 0,
                'transitionIn'      : 'none',
                'transitionOut'     : 'none',
                'type'              : 'image',
                'changeFade'        : 0,
                'index'		: id
        });
    }
</script>

</div>